<template>
    <div class="banner">
        <el-carousel height="400px">
            <el-carousel-item v-for="item in banner_list">
                    <img :src="item.img" alt />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    name: "Banner",
    data() {
        return { banner_list: [] }
    },
    // 当组件一创建，就向后台申请获取轮播图
    created() {
        this.$axios
            .get(this.$settings.base_url + '/home/banner/')
            .then(response => {
                this.banner_list = response.data
            })
            .catch(error => {
                console.log(error)
            })
    }
}
</script>

<style scoped>
.el-carousel__item {
    height: 400px;
    min-width: 1200px;
}
.el-carousel__item img {
    height: 400px;
    margin-left: calc(50% - 1920px / 2);
}
</style>